<template>  
  <div class="maintenance-page">  
    <!-- 顶部导航 -->  
    <header class="header">  
      <div class="header-back" @click="goBack">←</div>  
      <h1 class="header-title">保养管理</h1>  
      <div class="header-close">×</div>  
    </header>  

    <!-- 搜索栏 -->  
    <div class="search-bar">  
      <i class="iconfont icon-search"></i>  
      <input  
        type="text"  
        class="search-input"  
        placeholder="请输入搜索内容"  
        v-model="searchQuery"  
        @input="filterTasks"  
      />  
    </div>  

    <!-- 条件筛选栏 -->  
    <div class="filter-bar">  
      <div class="filter-item" @click="toggleFilter('equipment')">  
        保养设备 <i class="iconfont icon-arrow-down"></i>  
      </div>  
      <div class="filter-item" @click="toggleFilter('status')">  
        保养状态 <i class="iconfont icon-arrow-down"></i>  
      </div>  
      <div class="filter-item" @click="toggleFilter('person')">  
        保养人员 <i class="iconfont icon-arrow-down"></i>  
      </div>  
    </div>  

    <!-- 保养任务列表 -->  
    <div class="task-list">  
      <div class="task-item" v-for="(task, index) in tasks" :key="index">  
        <img :src="logo" class="task-image" alt="保养图片" />  
        <div class="task-info">  
          <div class="task-title">  
            {{ formatDate(task.createdTime) }}//{{ task.deviceName }}  
          </div>  
          <div class="task-tags">  
             <span :class="'tag unprocessed'" v-if="task.status == 0 ">未保养</span>  
            <span :class="'tag processed'"  v-if="task.status == 1 ">保养中</span>  
            <span :class="'tag processing'" v-if="task.status == 2 ">已保养</span>  
            <span class="tag person">{{ task.maintenancePersonnel }}</span>  
            <span class="tag date">{{ task.createdTime }}</span>
          </div>  
          <div class="task-location">  
            <i class="iconfont icon-location"></i> 保养位置：{{ task.deviceName }}  
          </div>  
          <button class="upload-button" @click="uploadRecord(task.planId)">  
            记录上传  
          </button>  
        </div>  
      </div>  
    </div>  

    <!-- 底部导航栏 -->  
    <BottomNav :activeTab="'maintenance'" />  
  </div>  
</template>  

<script>  
import BottomNav from "../components/mobileBottomNav.vue";  
import {userList,deviceList,getDepts,getUsers,getSchedules,addCheckingPlan,getInspectionRecord} from "@/api/wushui/inspection";
import logo from '@/assets/logo/logo.png'

export default {  
  name: "MaintenancePage",  
  components: {  
    BottomNav,  
  },  
  data() {  
    return {  
      logo, 
      searchQuery: "", // 搜索内容  
      tasks: [],  
    };  
  },  
   created(){
    this.getList();

  },
  methods: {  
    getInspection(){
        getInspectionRecord().then((response) => {
          this.tasks = response.rows;
          console.log(response)
        }).catch(() => {
          this.$message.error("获取数据失败");
        });       
    },

     formatDate(dateString) {  
        // 创建一个 Date 对象  
        const date = new Date(dateString);  

        // 获取年、月、日  
        const year = date.getFullYear();  
        const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1  
        const day = String(date.getDate()).padStart(2, '0');  

        // 格式化为 "YYYY年MM月DD日"  
        return `${year}年${month}月${day}日`;  
    } , 
    
    getList() {
      this.getInspection();
    },
    goBack() {  
      alert("返回上一页");  
    },  
    toggleFilter(filterType) {  
      alert(`点击筛选：${filterType}`);  
    },  
    filterTasks() {  
      const query = this.searchQuery.toLowerCase();  
      this.tasks = this.tasks.filter((task) =>  
        task.name.toLowerCase().includes(query)  
      );  
    },  
    uploadRecord(id) {  
       this.$router.push({ path: '/maintenanceRecord', query: { faultDeclarationId: id } });
    },  
  },  
};  
</script>  

<style scoped>  
/* 页面主样式 */  
.maintenance-page {  
  font-family: Arial, sans-serif;  
  background: #f9f9f9;  
  padding-bottom: 60px; /* 防止底部导航被覆盖 */  
}  

/* 顶部导航 */  
.header {  
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
  background: white;  
  padding: 10px 15px;  
  border-bottom: 1px solid #eaeaea;  
}  

.header-back,  
.header-close {  
  font-size: 18px;  
  cursor: pointer;  
}  

.header-title {  
  font-size: 18px;  
  font-weight: bold;  
  color: #333;  
}  

/* 搜索栏样式 */  
.search-bar {  
  display: flex;  
  align-items: center;  
  background: white;  
  padding: 10px 15px;  
  border-bottom: 1px solid #eaeaea;  
}  

.search-input {  
  flex: 1;  
  border: none;  
  outline: none;  
  font-size: 14px;  
  padding: 5px;  
  color: #888;  
  background: #f9f9f9;  
  border-radius: 5px;  
}  

/* 筛选栏样式 */  
.filter-bar {  
  display: flex;  
  justify-content: space-between;  
  background: white;  
  padding: 10px 15px;  
  border-bottom: 1px solid #eaeaea;  
}  

.filter-item {  
  font-size: 14px;  
  cursor: pointer;  
  color: #333;  
  display: flex;  
  align-items: center;  
}  

.filter-item .icon-arrow-down {  
  font-size: 12px;  
  margin-left: 5px;  
}  

/* 保养任务列表样式 */  
.task-list {  
  padding: 10px;  
}  

.task-item {  
  display: flex;  
  gap: 10px;  
  background: white;  
  margin-bottom: 10px;  
  padding: 10px;  
  border-radius: 8px;  
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  
}  



.task-image {  
  width: 90px;  
  height: 90px;  
  border-radius: 8px;  
  object-fit: cover;  
}  

.task-info {  
  flex: 1;  
}  

.task-title {  
  font-size: 16px;  
  font-weight: bold;  
  color: #333;  
}  

.task-tags {  
  margin: 5px 0;  
}  

.tag {  
  font-size: 12px;  
  padding: 2px 5px;  
  margin-right: 5px;  
  border-radius: 4px;  
  color: white;  
}  

.tag.completed {  
  background: #28a745;  
}  

.tag.not-completed {  
  background: #dc3545;  
}  


.tag.processed {  
  background: #28a745;  
}  


.tag.processing {  
  background: #ffc107;  
  color: black;  
}  

.tag.unprocessed {  
  background: #dc3545;  
}  

.tag.person,  
.tag.date {  
  background: #007bff;  
}  
.tag.in-progress {  
  background: #ffc107;  
  color: black;  
}  

.tag.person {  
  background: #007bff;  
}  

.tag.date {  
  background: #ff9800;  
}  

.task-location {  
  font-size: 14px;  
  color: #666;  
  margin: 5px 0;  
}  

.upload-button {  
  background: #007bff;  
  color: white;  
  border: none;  
  padding: 5px 10px;  
  border-radius: 4px;  
  cursor: pointer;  
}  

.upload-button:hover {  
  background: #0056b3;  
}  
</style>